<template>
    <div id="Details">
        <details-nav-bar class="top-details" @titleClick="titleClick" ref="topNavBar"></details-nav-bar>
        <scroll class="d-wrapper" @scrolls="scrolls"  ref="scroll"  :probe-type='3'>
            <!-- 轮播图组件 -->
            <detail-swiper :top-images="topImages"></detail-swiper>
            <!-- 基本信息组件  这个模块 主要是信息展示 重点在 信息获取-->
            <detail-base-info :base-info='baseInfo'></detail-base-info>
                <!-- 店铺信息组件 -->
            <detail-shop-info :shop-info='shopInfo'></detail-shop-info>
                <!-- 商品图片组件 -->
            <detail-goods-info :goods-info='goodsInfo' @imageLoadOk="imageLoadOk">
            </detail-goods-info>
                <!-- 商品尺寸大小 -->
            <detail-size :size-info='sizeInfo' ref="Size"></detail-size>
             <!-- 评论信息组件 -->
            <detail-comment-info :commentinfo="commentinfo" ref="comment"></detail-comment-info>
             <!-- 推荐商品数据列表 -->
            <goods-list class="goods-list" ref="recommend" :goods="goods" :is-detail-msg="isDetailMsg"></goods-list>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
        <!-- 底部工具栏 加入购物车  -->
        <detail-bottom-tab @addShopCar="addShopCar" @buyNow="buyNow"></detail-bottom-tab>
    </div>
</template>
<script>
import {getDetails,BaseInfo,ShopInfo,SizeInfo,getDetailsGoodsList} from 'network/details'
import DetailsNavBar from './childComponents/DetailsNavBar'
import DetailSwiper from './childComponents/DetailSwiper'
import DetailBaseInfo from './childComponents/DetailBaseInfo'
import DetailShopInfo from './childComponents/DetailShopInfo'
import DetailGoodsInfo from './childComponents/DetailGoodsInfo'
// 评论信息组件
import DetailCommentInfo from './childComponents/DetailCommentInfo'
// 商品尺寸组件
import DetailSize from './childComponents/DetailSize'
// 引入推荐商品数据列表模块
import GoodsList from 'components/content/goods/GoodsList'
// 回到顶部
import BackTop from 'components/common/backtop/BackTop'
import DetailBottomTab from './childComponents/DetailBottomTab'
// 导入滚动模块
import Scroll from 'components/common/scroll/Scroll'

// 引入防抖动的封装函数 （不适用混入时，可以留，这里用的混入，所以可以删除）
import {debouce} from 'commons/util'
// 导入混入Minxi
// 就和导入公共的js一样
import {MixIn} from 'commons/mixin'

//导入vuex中的actions 属性 将actions中的函数映射到组件中
// import {mapActions} from vuex

    export default {
        name:'Details',
        data(){
            return {
                iid:null,
                topImages:[],     //轮播图数据
                baseInfo:{},     //基本信息保存
                shopInfo:{},     //店铺信息保存
                goodsInfo: {},   //商品图片等信息
                sizeInfo:{},     // 保存商品尺寸信息
                commentinfo:{},  //评论区信息
                goods: [],  //推荐商品数据
                isDetailMsg: true,  //因为我们推荐数据的组件是用同一个的，所以用来区分数据
                themeTops: [],   //保存头部导航栏对应到的offsetTop值
                isShowBackTop:false
            }
        },
        components:{
            DetailsNavBar,
            DetailSwiper,
            Scroll,
            DetailBaseInfo,
            DetailShopInfo,
            DetailGoodsInfo,
            DetailSize,
            DetailCommentInfo,
            GoodsList,
            BackTop,
            DetailBottomTab
        },
        created() {
            // 先把 iid保存下来
            this.iid = this.$route.params.iid;
            getDetails(this.iid).then(res=>{
                console.log(res);
                const Data = res.result;
                this.topImages = Data.itemInfo.topImages;
                this.baseInfo = new BaseInfo(Data.itemInfo,Data.shopInfo.services,Data.columns);
                // 4、保存店铺信息数据
                this.shopInfo = new ShopInfo(Data.shopInfo);
                // 5、商品图片等信息
                this.goodsInfo = Data.detailInfo;
                // 6、商品尺寸信息
                this.sizeInfo =  new SizeInfo(Data.itemParams.info,Data.itemParams.rule);
                // 7、评论信息
                // 判断是否有评论，因为存在没有评论的情况
                console.log('评论区显示问题');
                if(Data.rate.cRate !==0) this.commentinfo =Data.rate;

            },rej=>{
                alert('失败了！');
            });
            // 推荐其它商品列表
            getDetailsGoodsList().then(res=>{
                //  获取商品列表数据
                   console.log("商品列表");
                //  console.log(res);
                this.goods = res.data.list;
            })
        },
        // 使用混入时
        // 在使用的时候就不一样了 这里需要特使的关键字 mixins
        // 这样就已经 在使用混入了 把里方法放到vue的对象里了
        mixins: [MixIn],
        methods: {
            // ...mapActions({ //使用对象的形式映射进来
            //     'addCart': ADDCART
            // }),
            imageLoadOk(){
                console.log('获取图片加载完成事件');
                 // 刷新
                    this.$refs.scroll.refresh();
                    this.themeTops = [];
                    this.themeTops.push(0);
                    console.log('weizhi');
                    this.themeTops.push(this.$refs.Size.$el.offsetTop);
                    this.themeTops.push(this.$refs.comment.$el.offsetTop);
                    this.themeTops.push(this.$refs.recommend.$el.offsetTop);
                    console.log(this.themeTops);
            },
            //头部导航栏 的点击事件
            titleClick(index){
                console.log('触发了 详情页的导航事件');
                console.log("参数"+index);
                this.$refs.scroll.scrollTo(0,-this.themeTops[index],300);

            },
            // 回到顶部 事件
            backClick(){
                //console.log('事件触发了');
                this.$refs.scroll.scrollTo();
            // console.log(this.$refs.scroll.scrollTo);
            },
            scrolls(position){
                // console.log('定位');
                // console.log(position.y);
                // this.backClick(position)
                if(-position.y>=1000){
                    this.isShowBackTop = true;
                }
            },
            // 加入购物车
            addShopCar(){
                console.log('添加购物车');
                const product = {};
                product.title = this.baseInfo.title
                product.price = this.baseInfo.NowPrice
                product.desc = this.baseInfo.desc
                product.image = this.topImages[0]
                product.iid = this.iid
                product.count = 1;
                // 如果是调用mutations里的方法可以用commit
                // this.$store.commit('edit',product);
                //如果是改actions 里的方法要用dispath
                this.$store.dispatch('edit',product);
            },
            // 立即购买
            buyNow(){
                console.log('立即购买');
            }
        },
        mounted() {
            const refresh = debouce(this.$refs.scroll.refresh,500);
                // 事件总线，接收传递过来的事件
            this.$bus.$on('imgLoadOk', () => {
                refresh();// 防抖动
            })
            // 获取offsetTop值
            // 每一个组件都有一个$el属性，可以获取子组件元素的节点
            // console.log(this.$refs.tabTop2.$el.offsetTop)
            console.log(11111)
        },
}
</script>
<style scope>
  #Details {
    overflow-x: hidden;
    height: 100vh;
  }
  .d-wrapper {
    height: calc(100% - 93px);
    position: relative;
    z-index: 100;
    background-color: white;
  }
   .goods-list {
     margin-top: 8px;
  }
  .top-details {
    position: relative;
    z-index: 101;
    background-color: white;
  }

</style>